<template>
<el-card>
    <template #header>{{title}}</template>
    <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180" />
        <el-table-column prop="name" label="课程名称" width="180" />
        <el-table-column prop="date" label="创建时间" />
        <el-table-column   prop="visible" label="可见状态" >
        <template #default="scope">
            <el-switch v-model="scope.row.visible" @change="handleVisibleChange(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="caozuo" label="操作" width="400">
        <template #default="scope" >
            <el-button @click="handleClick(scope.row, '编辑')">编辑</el-button>
            <el-button @click="handleClick(scope.row, '资源管理')">资源管理</el-button>
            <el-button @click="handleClick(scope.row, '资源编排')">资源编排</el-button>
            <el-button @click="handleClick(scope.row, '开课')">开课</el-button>
          </template>
          </el-table-column>
    </el-table>
</el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'


const tableData = ref ([{
                    id: '1',
                    name: 'Java程序设计',
                    date: '2024-5-9',
                    visible: true,
                    caozuo:'',
                },
                {
                    id: '2',
                    name: 'MySQL数据库技术',
                    date: '2024-5-9',
                    visible: false,
                    caozuo:'',
                },
                {
                    id: '3',
                    name: 'WEB前端开发基础',
                    date: '2024-5-9',
                    visible: true,
                    caozuo:'',
                },
                {
                    id: '4',
                    name: 'WEB前端项目开发实战',
                    date: '2024-5-9',
                    visible: false,
                    caozuo:'',
                }
            ])
            function handleClick(row, action) {
  ElMessage(`点击了${row.name}的${action}按钮`)
}

function handleVisibleChange(row, visible) {
  ElMessage(`将${row.name}的可见状态修改为${row.visible ? '可见' : '不可见'}`)
}
</script>
